<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">
<style>
  .port-box {
    padding: 16px;
  }
  .new-port-box {
    display: flex;
    align-items: center;
  }
  .new-port-box>input {
    width: 150px;
  }
</style>
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0 text-dark">服务器设置</h1>
      </div><!-- /.col -->
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a th:href="@{../admin}">首页</a></li>
          <li class="breadcrumb-item active">配置中心</li>
          <li class="breadcrumb-item active">服务器设置</li>
        </ol>
      </div><!-- /.col -->
    </div><!-- /.row -->
  </div><!-- /.container-fluid -->
</div>
<!-- Main content -->
<section class="content">
  <div class="card card-info">
    <div class="port-box">
      <span>现端口号： </span>
      <span th:text="${serverPort}"></span>
    </div>
  </div>
  <shiro:hasPermission name="server:change">
    <div class="card card-info">
      <div class="port-box new-port-box">
        <span>新端口号:</span>
        <input type="number" class="form-control m-2" id="newPort">
        <button id="change_port" type="button" class="btn btn-primary">
          <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>提交
        </button>
      </div>
    </div>
  </shiro:hasPermission>
</section>

<script>
  $(function () {
    $('#change_port').on('click', function() {
      var port = $('#newPort').val();
      if (!port) {
        layer.msg("请输入端口号再提交修改");
        return;
      }
      Core.confirm("是否要修改tcp服务器的端口号？", function() {
        Core.getAjax("/cfg/server/change/" + port, null, function(res) {
          console.log(res);
          if (res.code === 1) {
            layer.msg("修改端口号成功");
            setTimeout(() => {
              window.location.reload();
            }, 1000)
          } else {
            layer.msg(res.message);
          }
        })
      })
    })
  });
</script>